<template>
  <div>
    <el-card class="check-container">
      <h3 class="check-title">心理咨询处理</h3>
      <div v-show="selectCardShow">
        <el-form :model="checkForm" label-position="left" label-width="80px">
          <el-form-item label="预约账号">
            <el-input :placeholder="checkForm.acc" disabled></el-input>
          </el-form-item>
          <el-form-item label="预约时间" prop="date">
            <el-col :span="11">
              <el-input :placeholder="checkForm.yyrq" disabled></el-input>
            </el-col>
            <el-col :span="2" class="el-form--inline">-</el-col>
            <el-col :span="11">
              <el-input :placeholder="checkForm.availTime.start" disabled></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="咨询主题">
            <el-input :placeholder="checkForm.zxzt" type="text" disabled></el-input>
          </el-form-item>
          <el-form-item label="问题简述" prop="bz">
            <el-input :autosize="{ minRows: 4, maxRows: 5}"
                      :placeholder="checkForm.bz"
                      type="textarea" disabled></el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 25%;background: #9495c5;border: none" type="primary" v-on:click="checkBooking">接收
            </el-button>
            <el-button style="width: 25%;background: #9495c5;border: none" type="primary" v-on:click="finishBooking">完成
            </el-button>
            <el-button style="width: 25%;background: #9495c5;border: none" type="primary" v-on:click="clearData">重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'CheckCard',
  data () {
    return {
      checkForm: {
        id: '',
        acc: '',
        jsxm: '',
        topic: {
          id: '',
          name: ''
        },
        zxzt: '',
        bz: '',
        yyrq: '',
        availTime: {
          id: '',
          start: '',
          end: ''
        },
        other: ' ',
        createtime: '',
        state: ''
      },
      selectCardShow: true
    }
  },
  methods: {
    checkBooking () {
      this.$axios.post('/student/booking', {
        id: this.checkForm.id,
        acc: this.checkForm.acc,
        jsxm: this.checkForm.jsxm,
        topic: this.checkForm.topic,
        zxzt: this.checkForm.zxzt,
        bz: this.checkForm.bz,
        yyrq: this.checkForm.yyrq,
        availTime: this.checkForm.availTime,
        other: this.checkForm.other,
        createtime: this.checkForm.createtime,
        state: 200
      }).then(resp => {
        if (resp && resp.status === 200) {
          this.$message('接收预约')
        }
      }).catch(failResponse => {
        alert('服务器响应请求失败！')
      })
    },
    finishBooking () {
      this.$axios.post('/student/booking', {
        id: this.checkForm.id,
        acc: this.checkForm.acc,
        jsxm: this.checkForm.jsxm,
        topic: this.checkForm.topic,
        zxzt: this.checkForm.zxzt,
        bz: this.checkForm.bz,
        yyrq: this.checkForm.yyrq,
        availTime: this.checkForm.availTime,
        other: this.checkForm.other,
        createtime: this.checkForm.createtime,
        state: 300
      }).then(resp => {
        if (resp && resp.status === 200) {
          this.$alert('处理预约完成！')
        }
      }).catch(failResponse => {
        alert('服务器响应请求失败！')
      })
    },
    clearData () {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    jumpTypeSelect (visible) {
      this.selectCardShow = visible
    }
  }
}
</script>

<style scoped>
.check-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 120px auto 100px;
  width: 400px;
  padding: 0px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.check-title {
  margin: 20px auto 20px auto;
  text-align: center;
  color: #9495c5;
}

.size-full {
  width: 100%;
}
</style>
